<template>
  <div class="arguments-page">
    <a-form :model="formState" :rules="argumentsRules" ref="formRef">
      <a-form-item label="年代 " name="year">
        <a-textarea
          v-model:value.trim()="formState.year"
          :auto-size="{ minRows: 3, maxRows: 5 }"
          placeholder="请输入年代"
          :maxlength="1000"
          class="input-w-782"
        />
      </a-form-item>
      <a-form-item label="语言" name="lang" class="m-b-32">
        <a-textarea
          v-model:value.trim()="formState.lang"
          :auto-size="{ minRows: 3, maxRows: 5 }"
          placeholder="请输入语言"
          :maxlength="1000"
          class="input-w-782"
        />
      </a-form-item>
    </a-form>
    <a-button type="primary" class="bottom-btn" @click="savePage">保存当前页面</a-button>
  </div>
</template>
<script lang="ts" setup>
import { onMounted, reactive, ref } from 'vue'
import apis from '@/apis'
import { message } from 'ant-design-vue'
import { storage } from '@/utils/storage'
const {
  site: { get_video_option, set_video_option }
} = apis
const formRef = ref()
const siteId = storage.get('siteId')
const formState = reactive<{ year: string; lang: string }>({
  year: '',
  lang: ''
})
const argumentsRules = reactive({
  year: [{ required: true, message: '请输入年代' }],
  lang: [{ required: true, message: '请输入语言' }]
})
const getVideoOption = () => {
  get_video_option({ site_id: siteId }).then((res: any) => {
    console.log('res: ', res)
    formState.lang = res.lang
    formState.year = res.year
  })
}
const setLang = () => {
  set_video_option({ site_id: siteId, lang: formState.lang, year: formState.year }).then(() => {
    message.success('影片参数修改成功')
    getVideoOption()
  })
}
const savePage = () => {
  formRef.value.validate().then(() => {
    setLang()
  })
}
onMounted(() => {
  getVideoOption()
})
</script>

<style lang="less" scoped>
.arguments-page {
  padding: 24px;
  box-sizing: border-box;

  :deep(.ant-form) {
    border-bottom: 1px solid #f0f0f0;

    .ant-form-item-label > label::after {
      content: '';
      position: relative;
      top: -0.5px;
      margin: 0 0 0 16px;
    }

    .input-w-782 {
      width: 782px;
    }

    .m-b-32 {
      margin-bottom: 32px;
    }

    :deep(textarea) {
      min-height: 70px;
    }
  }

  .bottom-btn {
    margin-top: 24px;
  }
}
</style>
